<!--
 * @Author: Hugh Xie
 * @Date: 2022-04-09 10:17:36
 * @LastEditors: Hugh Xie
 * @LastEditTime: 2022-04-09 10:17:36
 * @FilePath: \frontend\src\view\student\student-bop-manage\modal\add1.vue
-->
<template>
  <a-spin :spinning="isLoading">
    <page-layout>
      <a-row :gutter="[10, 10]">
        <a-col :span="24">
          <a-form ref="formRef" :model="formState.state" :rules="formRules" :label-col="labelCol"
            :wrapper-col="wrapperCol">
            <a-card>
              <footer-button :buttons="formState.buttons" />
              <a-row>
                <a-col :span="8">
                  <a-form-item :label="t('professor-manage.label.Photo')" name="headUrl">
                    <a-upload name="headUrl" list-type="picture-card" class="avatar-uploader" accept=".jpg, .jpeg, .png"
                      :show-upload-list="false" action="#" :before-upload="beforeUpload">
                      <a-spin :spinning="state.uploadImgLoading">
                        <img width="100" v-if="formState.state.headUrl" :src="formState.state.headUrl"
                          alt="avatar" />
                        <div v-else>
                          <plus-outlined></plus-outlined>
                          <div class="ant-upload-text">{{t('professor-manage.label.Uploadphotos')}}</div>
                        </div>
                      </a-spin>
                    </a-upload>
                    <div class="upload-title">支持jpg、jpeg、png格式</div>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.stuName')" name="stuName">
                    <a-input v-model:value="formState.state.stuName" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.givenName')" name="givenName">
                    <a-input v-model:value="formState.state.givenName" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.surname')" name="surname">
                    <a-input v-model:value="formState.state.surname" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="微信昵称" name="wxUserId">
                    <a-input v-model:value="formState.state.wxUserId" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.sex')" name="sex">
                    <a-select v-model:value="formState.state.sex" :placeholder="t('placeholder.pleaseSelect')">
                      <a-select-option v-for="item in dictLists.data['sex']" :key="item.id" :value="item.value">
                        {{item.label}}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.papersType')" name="papersType">
                    <a-select v-model:value="formState.state.papersType" :placeholder="t('placeholder.pleaseSelect')">
                      <a-select-option v-for="item in dictLists.data['document_type']" :key="item.id"
                        :value="item.value">{{item.label}}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.paperNum')" name="paperNum">
                    <a-input v-model:value="formState.state.paperNum" oninput="value=value.replace(/[^\w\.\/]/ig,'')"
                      :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.dateBirth')" name="dateBirth">
                    <a-date-picker style="width:100%" v-model:value="formState.state.dateBirth" format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD" :placeholder="t('placeholder.selectDate')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.birthAdd')" name="birthAdd">
                    <a-input v-model:value="formState.state.birthAdd" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.nationality')" name="nationality">
                    <a-input v-model:value="formState.state.nationality" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.label.chnSource')" name="chnName">
                    <a-input v-model:value="formState.state.chnName" readonly
                      :placeholder="t('placeholder.pleaseSelect')">
                      <template #addonAfter>
                        <div class="primary-color cursor-pointer" @click="openDialog('chnSource')">
                          {{t('button.select')}}
                        </div>
                      </template>
                    </a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.label.interDegree')" name="interDegree">
                    <a-select v-model:value="formState.state.interDegree" :placeholder="t('placeholder.pleaseSelect')">
                      <a-select-option v-for="item in dictLists.data['degree_intention']" :key="item.id"
                        :value="item.value">{{ item.label }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.label.saleHead')" name="saleHead">
                    <a-input v-model:value="formState.state.saleHead" readonly
                      :placeholder="t('placeholder.pleaseSelect')">
                      <template #addonAfter>
                        <div class="primary-color cursor-pointer" @click="openDialog('saleHead')">{{t('button.select')}}
                        </div>
                      </template>
                    </a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.label.asdHead')" name="asdHead">
                    <a-input v-model:value="formState.state.asdHead" readonly
                      :placeholder="t('placeholder.pleaseSelect')">
                      <template #addonAfter>
                        <div class="primary-color cursor-pointer" @click="openDialog('asdHead')">{{t('button.select')}}
                        </div>
                      </template>
                    </a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.label.actHead')" name="actHead">
                    <a-input v-model:value="formState.state.actHead" readonly
                      :placeholder="t('placeholder.pleaseSelect')">
                      <template #addonAfter>
                        <div class="primary-color cursor-pointer" @click="openDialog('actHead')">{{t('button.select')}}
                        </div>
                      </template>
                    </a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.relaAdd')" name="relaAdd">
                    <a-input v-model:value="formState.state.relaAdd" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.postalCode')" name="postalCode">
                    <a-input v-model:value="formState.state.postalCode" oninput="value=value.replace(/[^\d]/g,'')"
                      :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.visaType')" name="visaType">
                    <a-select v-model:value="formState.state.visaType" :placeholder="t('placeholder.pleaseSelect')">
                      <a-select-option v-for="item in dictLists.data['visa_type']" :key="item.id" :value="item.value">
                        {{ item.label }}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.localPhone')" name="localPhone">
                    <a-input v-model:value="formState.state.localPhone" oninput="value=value.replace(/[^\d]/g,'')"
                      :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.osPhone')" name="osPhone">
                    <a-input v-model:value="formState.state.osPhone" oninput="value=value.replace(/[^\d]/g,'')"
                      :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.email')" name="email">
                    <a-input v-model:value="formState.state.email" oninput="value=value.replace(/[^\d]/g,'')"
                      :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.backEmail')" name="backEmail">
                    <a-input v-model:value="formState.state.backEmail" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.eduType')" name="eduType">
                    <a-select v-model:value="formState.state.eduType" :placeholder="t('placeholder.pleaseSelect')">
                      <a-select-option v-for="item in dictLists.data['highest_education']" :key="item.id"
                        :value="item.value">{{ item.label }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-card>
            <div class="pre-title">{{t('student-bop-manage.title.College')}}</div>
            <a-card>
              <a-row>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.hschlName')" name="colName">
                    <a-input v-model:value="formState.state.colName" readonly
                      :placeholder="t('placeholder.pleaseSelect')">
                      <template #addonAfter>
                        <div class="primary-color cursor-pointer" @click="openDialog('universityVisible')">
                          {{t('button.select')}}
                        </div>
                      </template>
                    </a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.country')" name="colCty">
                    <a-input v-model:value="formState.state.colCty" readonly />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.city')" name="colAdd">
                    <a-input v-model:value="formState.state.colAdd" readonly />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.hschBtime')" name="colBtime">
                    <a-date-picker style="width:100%" v-model:value="formState.state.colBtime" format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD" :placeholder="t('placeholder.selectDate')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.hschEtime')" name="colEtime">
                    <a-date-picker style="width:100%" v-model:value="formState.state.colEtime" format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD" :placeholder="t('placeholder.selectDate')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.colEduCredit')" name="colEduCredit">
                    <a-input v-model:value="formState.state.colEduCredit" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.colCredit')" name="colCredit">
                    <a-input v-model:value="formState.state.colCredit" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.colReadPro')" name="colReadPro">
                    <a-input v-model:value="formState.state.colReadPro" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.colMinorPro')" name="colMinorPro">
                    <a-input v-model:value="formState.state.colMinorPro" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.colPga')" name="colPga">
                    <a-input v-model:value="formState.state.colPga" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.colDegree')" name="colDegree">
                    <a-input v-model:value="formState.state.colDegree" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-card>
            <div class="pre-title">{{t('student-bop-manage.title.gjaddress')}}</div>
            <a-card>
              <a-row>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.liveBtime')" name="liveBtime">
                    <a-date-picker style="width:100%" v-model:value="formState.state.liveBtime" format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD" :placeholder="t('placeholder.selectDate')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.country')" name="country">
                    <a-input v-model:value="formState.state.country" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.province')" name="province">
                    <a-input v-model:value="formState.state.province" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.city')" name="city">
                    <a-input v-model:value="formState.state.city" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.addDetail')" name="addDetail">
                    <a-input v-model:value="formState.state.addDetail" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.livePostCode')" name="livePostCode">
                    <a-input v-model:value="formState.state.livePostCode" oninput="value=value.replace(/[^\d]/g,'')"
                      :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-card>
            <div class="pre-title">{{t('student-bop-manage.title.emergencyContact')}}</div>
            <a-card>
              <a-row>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.label.stuName')" name="urgName">
                    <a-input v-model:value="formState.state.urgName" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.urgRelative')" name="urgRelative">
                    <a-select v-model:value="formState.state.urgRelative" :placeholder="t('placeholder.pleaseSelect')">
                      <a-select-option v-for="item in dictLists.data['emg_contact']" :key="item.id" :value="item.value">
                        {{item.label}}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.urgLag')" name="urgLag">
                    <a-input v-model:value="formState.state.urgLag" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.urgPhone')" name="urgPhone">
                    <a-input v-model:value="formState.state.urgPhone" oninput="value=value.replace(/[^\d]/g,'')"
                      :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.email')" name="urgEmail">
                    <a-input v-model:value="formState.state.urgEmail" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-card>
            <div class="pre-title">{{t('student-bop-manage.title.gzschool')}}</div>
            <a-card>
              <a-row>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.country')" name="hschCty">
                    <a-input v-model:value="formState.state.hschCty" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.city')" name="hschCity">
                    <a-input v-model:value="formState.state.hschCity" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.hschlName')" name="hschlName">
                    <a-input v-model:value="formState.state.hschlName" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.hschBtime')" name="hschBtime">
                    <a-date-picker style="width:100%" v-model:value="formState.state.hschBtime" format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD" :placeholder="t('placeholder.selectDate')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.hschEtime')" name="hschEtime">
                    <a-date-picker style="width:100%" v-model:value="formState.state.hschEtime" format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD" :placeholder="t('placeholder.selectDate')" />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-card>
            <div class="pre-title">{{t('student-bop-manage.title.Englishlevel')}}</div>
            <a-card>
              <a-row>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.Englishlevel')" name="engLevel">
                    <a-select v-model:value="formState.state.engLevel" :placeholder="t('placeholder.pleaseSelect')">
                      <a-select-option v-for="item in dictLists.data['eng_level']" :key="item.id" :value="item.value">
                        {{item.label}}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.engScore')" name="engScore">
                    <a-input v-model:value="formState.state.engScore" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.engTime')" name="engTime">
                    <a-date-picker style="width:100%" v-model:value="formState.state.engTime" format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD" :placeholder="t('placeholder.selectDate')" />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-card>
            <div class="pre-title">{{t('student-bop-manage.title.cjjs')}}</div>
            <a-card>
              <a-row>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.tranType')" name="tranType" :label-col="{ span: 7}">
                    <a-radio-group v-model:value="formState.state.tranType">
                      <a-radio value="1">{{t('student-bop-manage.title.tranType1')}}</a-radio>
                      <a-radio value="2">{{t('student-bop-manage.title.tranType2')}}</a-radio>
                    </a-radio-group>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-card>
            <a-card :title="t('student-bop-manage.title.tranType1add')"
              v-if="formState.state.tranType==1">
              <a-row v-for="(item,index) in formState.state.paperAdd" :key="index">
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.recName')">
                    <a-input v-model:value="item.recName" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.urgPhone')" :help="state['phoneError' + index]" :validateStatus="state['phoneStatus' + index]">
                    <a-input v-model:value="item.recPhone" @change="inputChange($event, 'phone', item.recPhone, index)"
                      :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.addDetail')">
                    <a-input v-model:value="item.recAdd" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.livePostCode')" :help="state['postCodeError' + index]" :validateStatus="state['postCodeStatus' + index]">
                    <a-input v-model:value="item.postalCode" @change="inputChange($event, 'postCode', item.postalCode, index)"
                      :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>
                    <a-button v-if="index === 0" type="primary" class="ml-20" @click="addaperdDelivery">
                      {{t('button.add')}}
                    </a-button>
                    <a-button v-else type="danger" class="ml-20" @click="deleteaperdDelivery(index)">
                      {{t('button.delete')}}
                    </a-button>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-card>
            <a-card :title="t('student-bop-manage.title.tranType2add')"
              v-if="formState.state.tranType==2">
              <a-row>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.recName')">
                    <a-input v-model:value="formState.state.emailAdd[0].recName"
                      :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.email')" :help="state.emailError" :validateStatus="state.emailStatus">
                    <a-input @change="inputChange($event, 'email')" v-model:value="formState.state.emailAdd[0].email"
                      :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.backEmail')" :help="state.backEmailError" :validateStatus="state.backEmailStatus">
                    <a-input @change="inputChange($event, 'backEmail')" v-model:value="formState.state.emailAdd[0].backEmail"
                      :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-card>
            <div class="pre-title">{{t('student-bop-manage.title.pl')}}</div>
            <a-card>
              <a-row>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.pl')" name="followRate">
                    <a-input v-model:value="formState.state.followRate" placeholder="天/跟进一次" />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-card>
            <div class="pre-title">{{t('student-bop-manage.title.Intentioninformation')}}</div>
            <a-card>
              <a-row v-for="(item,index) in formState.state.purpose" :key="index">
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.schoolName')">
                    <a-input v-model:value="item.school" readonly :placeholder="t('placeholder.pleaseSelect')">
                      <template #addonAfter>
                        <div class="primary-color cursor-pointer" @click="openDialog('universityVisible',index)">
                          {{t('button.select')}}
                        </div>
                      </template>
                    </a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.courseName')">
                    <a-input v-model:value="item.course" readonly :placeholder="t('placeholder.pleaseSelect')">
                      <template #addonAfter>
                        <div class="primary-color cursor-pointer" @click="openDialog('course',index)">
                          {{t('button.select')}}
                        </div>
                      </template>
                    </a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.projectName')">
                    <a-select v-model:value="item.project" :placeholder="t('placeholder.pleaseSelect')">
                      <a-select-option v-for="item in dictLists.data['intentionProject']" :key="item.id"
                        :value="item.value">
                        {{item.label}}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.authStatus')">
                    <a-select v-model:value="item.authStatus">
                      <a-select-option v-for="item in dictLists.data['course_status']" :key="item.id"
                        :value="item.value">{{ item.label }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="8" v-if="item.authStatus==4">
                  <a-form-item :label="t('student-bop-manage.title.failCause')" name="failCause">
                    <a-input v-model:value="item.failCause" :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <a-row>
                    <a-col :span="8">
                      <a-form-item :label="t('student-bop-manage.title.screenshot')" @click="changeindex(index)">
                        <a-upload name="file" list-type="picture-card" class="avatar-uploader" accept=".jpg, .jpeg, .png"
                          :show-upload-list="false" action="#" :before-upload="screenshotUpload">
                          <a-spin :spinning="state.uploadImgLoading">
                            <img width="100" v-if="formState.state.purpose[index].authUrl" :src="formState.state.purpose[index].authUrl" alt="avatar" />
                            <div v-else>
                              <plus-outlined></plus-outlined>
                              <div class="ant-upload-text">{{t('professor-manage.label.Uploadphotos')}}</div>
                            </div>
                          </a-spin>
                        </a-upload>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </a-col>
                <a-col :span="24">
                  <a-form-item>
                    <a-button v-if="index === 0" type="primary" class="ml-20" @click="addIntention(index)">
                      {{t('button.add')}}
                    </a-button>
                    <a-button v-else type="danger" class="ml-20" @click="deleteIntention(index)">
                      {{t('button.delete')}}
                    </a-button>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-card>
            <div class="pre-title">{{t('student-bop-manage.title.remark')}}</div>
            <a-card>
              <a-row>
                <a-col :span="8">
                  <a-form-item :label="t('student-bop-manage.title.remark')" name="remark">
                    <a-textarea :auto-size="{ minRows: 2, maxRows: 6 }" v-model:value="formState.state.remark"
                      :placeholder="t('placeholder.pleaseEnter')" />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-card>
          </a-form>
        </a-col>
      </a-row>
      <BasicTableModal v-model:visible="modalConfig.show" v-if="modalConfig.show" :columns="modalConfig.commonColumns"
        :fetchAjax="modalConfig.api" :title="modalConfig.title" :searchForm="modalConfig.searchForm"
        @selectUniversity="value => selectItem(value, modalConfig.currentType , modalConfig.index)" />
    </page-layout>
  </a-spin>
</template>
<script setup>
  import {
    save,
    selectById,
    update
  } from "@/api/module/student/student-bop-manage";
  import {
    onMounted,
    reactive,
    ref,
    toRaw,
    onActivated,
    computed,
  } from "vue";
  import {
    useRoute,
    useRouter
  } from 'vue-router'
  import {
    getDictByCodesReturnObj
  } from '@/tools/get-dict'
  import dictEnum from '@/const/dict'
  import {
    page as schoolPage
  } from '@/api/module/school'
  import {
    page as userPage
  } from '@/api/module/user'
  import {
    page as chnSourcePage
  } from '@/api/module/channel-source'
  import {
    page as projectPage
  } from '@/api/module/project'
  import {
    page as coursePage
  } from '@/api/module/courseBaseInfo'
  import BasicTableModal from '@/component/basic-table-modal'
  import {
    message
  } from "ant-design-vue";
  import {
    upload
  } from "@/api/module/oss"
  import moment from "moment";
  import {
    useI18n
  } from "vue-i18n";
  import mixin from '@/mixins'
  import { 
  emailPattern, // 邮箱
  phoneCardPattern, // 电话号码
  postCodePattern, // 邮编

} from "@/utils/validator.js"
  const {
    t
  } = useI18n();
  const { returnRoute } = mixin.setup()
  let isLoading = ref(false)
  const formRef = ref();
  const route = useRoute()
  const router = useRouter()

  const formState = reactive({
    // 成绩寄送
    buttons: [{
        name: 'save',
        event: () => onSubmit(),
        type: "primary",
        code: ''
      },
      {
        name: 'reset',
        event: () => resetForm(),
        code: ''
      }
    ],
    state: {}
  });
  const initForm = () => {
    formState.state =  {
      //基础信息
      headUrl:'',
      stuName: '',
      surname: '',
      givenName: '',
      wxUserId:'',
      sex: '',
      papersType: '',
      paperNum: '',
      dateBirth: '',
      birthAdd: '',
      nationality: '',
      chnSource: '',
      chnName: '',
      interDegree: '',
      saleHead: '',
      saleHeadCode: '',
      asdHead: '',
      asdHeadCode: '',
      actHead: '',
      actHeadCode: '',
      relaAdd: '',
      postalCode: '',
      visaType: '',
      localPhone: '',
      osPhone: '',
      email: '',
      backEmail: '',
      eduType: '',
      // 国籍所在地永久居住地址
      liveBtime: '',
      country: '',
      province: '',
      city: '',
      addDetail: '',
      livePostCode: '',
      // 紧急联系人
      urgName: '',
      urgRelative: '',
      urgLag: '',
      urgPhone: '',
      urgEmail: '',
      // 毕业高中
      hschCty: '',
      hschCity: '',
      hschlName: '',
      hschBtime: '',
      hschEtime: '',
      // 就读大学
      colCty: '',
      colAdd: '',
      colName: '',
      colBtime: '',
      colEtime: '',
      colEduCredit: '',
      colCredit: '',
      colReadPro: '',
      colMinorPro: '',
      colPga: '',
      colDegree: '',
      // 英语等级
      engLevel: '',
      engScore: '',
      engTime: '',
      tranType: '1',
      // 字纸成绩单寄送
      paperAdd: [{
        id: '',
        postalCode: '',
        recName: '',
        recPhone: '',
        recAdd: '',
        tranType: '1',
        email: '',
        backEmail: ''
      }],
      // 电子成绩单寄送
      emailAdd: [{
        id: '',
        postalCode: '',
        recName: '',
        recPhone: '',
        recAdd: '',
        tranType: '2',
        email: '',
        backEmail: ''
      }],
      transcriptAdd: [],
      // 跟进频率
      followRate: '',
      // 意向信息
      purpose: [{
        id: '',
        school: '',
        project: '',
        course: '',
        authStatus: '',
        authUrl: '',
        failCause: ''
      }],
      // 备注
      remark: '',

      emailError: '',
      emailStatus: 'success',
      backEmailError: '',
      backEmailStatus: 'success',
      postCodeError: '',
      postCodeStatus: 'success',
    }
  }
  const saveKey = "save";
  const tranType = computed(() => {
    console.log('formState.state.tranType: ', formState.state.tranType);
    return formState.state.tranType
  } )
  const labelCol = {
    span: 6
  }
  const wrapperCol = {
    span: 18
  }
  let dictLists = reactive({
    data: {},
    fileuploadindex: 0,
    submitdata: {}
  })

  const modalConfig = reactive({
    title: '选择学校',
    api: schoolPage,
    show: false,
    currentType: '',
    commonColumns: [],
    universityColumns: [],
    responsibleColumns: [],
    index: '',
    searchForm: [],
    chnSourceSearchForm: [{
      label: t('student-bop-manage.openDialog.chnName'),
      key: 'chnName',
      type: 'input',
      placeholder: t('placeholder.pleaseEnter')
    }],
    saleHeadSearchForm: [{
      label: t('student-bop-manage.openDialog.nickname'),
      key: 'nickname',
      type: 'input',
      placeholder: t('placeholder.pleaseEnter')
    }],
    schoolSearchForm: [{
      label: t('student-bop-manage.openDialog.schoolname'),
      key: 'schoolCnName',
      type: 'input',
      placeholder: t('placeholder.pleaseEnter')
    }],
    projectSearchForm: [{
      label: t('student-bop-manage.openDialog.schName'),
      key: 'schName',
      type: 'input',
      placeholder: t('placeholder.pleaseEnter')
    }],
    courseSearchForm: [{
      label: t('student-bop-manage.openDialog.courseName'),
      key: 'courseName',
      type: 'input',
      placeholder: t('placeholder.pleaseEnter')
    }],
  })
  const formRules = {
    stuName: [{
      required: true,
      message: t('placeholder.pleaseEnter'),
      trigger: 'blur'
    }],
    sex: [{
      required: true,
      message: t('placeholder.pleaseSelect'),
      trigger: 'blur'
    }],
    papersType: [{
      required: false,
      message: t('placeholder.pleaseSelect'),
      trigger: 'blur'
    }],
    paperNum: [{
      required: false,
      message: t('placeholder.pleaseEnter'),
      trigger: 'blur'
    }],
    nationality: [{
      required: false,
      message: t('placeholder.pleaseEnter'),
      trigger: 'blur'
    }],
    chnSource: [{
      required: false,
      message: t('placeholder.pleaseSelect'),
      trigger: 'blur'
    }],
    visaType: [{
      required: false,
      message: t('placeholder.pleaseSelect'),
      trigger: 'blur'
    }],
    urgName: [{
      required: false,
      message: t('placeholder.pleaseEnter'),
      trigger: 'blur'
    }],
  };
  const addaperdDelivery = () => {
    formState.state.paperAdd.push({
      id: '',
      postalCode: '',
      recName: '',
      recPhone: '',
      recAdd: '',
      tranType: '1',
      email: '',
      backEmail: ''
    })
    const index = formState.state.paperAdd.length - 1
    state['postCodeError' + index] = ''
    state['postCodeStatus' + index] = 'success'
    state['phoneError' + index] = ''
    state['phoneStatus' + index] = 'success'
  }
  const addIntention = () => formState.state.purpose.push({
    id: '',
    school: '',
    project: '',
    course: '',
    authStatus: '',
    authUrl: '',
    failCause: ''
  })
  const deleteaperdDelivery = sendIndex => {
    formState.state.paperAdd.splice(sendIndex, 1)
  }
  const deleteIntention = sendIndex => formState.state.purpose.splice(sendIndex, 1)
  const changeindex = index => dictLists.fileuploadindex = index
  const getDetails = () => {
    formRef.value.resetFields();
    if (route.query.id) {
      selectById({
        id: route.query.id
      }).then(res => {
        if (res.code === 200) {
          if (res.data.dateBirth != '') {
            res.data.dateBirth = res.data.dateBirth ? moment(res.data.dateBirth).format(
              "YYYY-MM-DD") : "";
          }
          if (res.data.liveBtime != '') {
            res.data.liveBtime = res.data.liveBtime ? moment(res.data.liveBtime).format(
              "YYYY-MM-DD") : "";
          }
          if (res.data.hschBtime != '') {
            res.data.hschBtime = res.data.hschBtime ? moment(res.data.hschBtime).format(
              "YYYY-MM-DD") : "";
          }
          if (res.data.hschEtime != '') {
            res.data.hschEtime = res.data.hschEtime ? moment(res.data.hschEtime).format(
              "YYYY-MM-DD") : "";
          }
          if (res.data.colBtime != '') {
            res.data.colBtime = res.data.colBtime ? moment(res.data.colBtime).format(
              "YYYY-MM-DD") : "";
          }
          if (res.data.colEtime != '') {
            res.data.colEtime = res.data.colEtime ? moment(res.data.colEtime).format(
              "YYYY-MM-DD") : "";
          }
          if (res.data.engTime != '') {
            res.data.engTime = res.data.engTime ? moment(res.data.engTime).format(
              "YYYY-MM-DD") : "";
          }
          formState.state = {
            ...formState.state,
            ...res.data
          }
          let paperAdd = []
          let emailAdd = []
          formState.state.transcriptAdd && formState.state.transcriptAdd.forEach(item => {
            if (item.tranType == 1) {
              formState.state.tranType = item.tranType
              paperAdd.push(item)
            } else if (item.tranType == 2) {
              formState.state.tranType = formState.state.tranType
                                        ? formState.state.tranType
                                        : item.tranType
              emailAdd.push(item)
            }
          })
          formState.state.paperAdd = paperAdd
          formState.state.emailAdd = emailAdd
          if (formState.state.paperAdd
        && !formState.state.paperAdd.length) {
          formState.state.paperAdd = [{
                                        id: '',
                                        postalCode: '',
                                        recName: '',
                                        recPhone: '',
                                        recAdd: '',
                                        tranType: '1',
                                        email: '',
                                        backEmail: ''
                                      }]
        }
      if (formState.state.emailAdd
        && !formState.state.emailAdd.length) {
          formState.state.emailAdd = [{
                                        id: '',
                                        postalCode: '',
                                        recName: '',
                                        recPhone: '',
                                        recAdd: '',
                                        tranType: '2',
                                        email: '',
                                        backEmail: ''
                                      }]
        }
          if (formState.state.purpose
              && !formState.state.purpose.length) {
                formState.state.purpose = [{
                                            id: '',
                                            school: '',
                                            project: '',
                                            course: '',
                                            authStatus: '',
                                            authUrl: '',
                                            failCause: ''
                                          }]
              }
        }
        if (res.code === 500) return message.error(res.msg || '服务器错误')
      })
    } else {
      initForm()
    }
  }
  onActivated(() => {
    getDetails();
  });
  onMounted(async () => {
    dictLists.data = await getDictByCodesReturnObj([
      dictEnum.SEX,
      dictEnum.DOCUMENT_TYPE,
      dictEnum.DEGREE_INTENTION,
      dictEnum.VISA_TYPE,
      dictEnum.HIGHEST_EDUCATION,
      dictEnum.COURSE_STATUS,
      dictEnum.CHANNEL_STATUS,
      dictEnum.EMG_CONTACT,
      dictEnum.ENG_LEVEL,
      dictEnum.INTENTIONPROJECT
    ])
    modalConfig.universityColumns = [
      {
        dataIndex: "code",
        key: "code",
        title: "学校编码"
      },
      {
        dataIndex: "schoolEnName",
        key: "schoolEnName",
        title: t('student-bop-manage.openDialog.schoolEnName')
      },
      {
        dataIndex: "schFollowUpProgress",
        key: "schFollowUpProgress",
        title: t('student-bop-manage.openDialog.schFollowUpProgress'),
        cellRender: (record, data) => {
          if (dictLists.data[dictEnum.FOLLOW_PROGRESS]) {
            const item = dictLists.data[dictEnum.FOLLOW_PROGRESS].find(v => v.value ==
              data)
            return item ? item.label : ''
          }
          return ''
        }
      },
    ]

    modalConfig.responsibleColumns = [{
        dataIndex: "nickname",
        key: "nickname",
        title: t('student-bop-manage.openDialog.nickname')
      },
      {
        dataIndex: "deptName",
        key: "deptName",
        title: t('student-bop-manage.openDialog.deptName')
      },
      {
        dataIndex: "postName",
        key: "postName",
        title: t('student-bop-manage.openDialog.postName')
      },
    ]
    modalConfig.chnSourceColumns = [{
        dataIndex: "chnName",
        key: "chnName",
        title: t('student-bop-manage.openDialog.chnName')
      },
      {
        dataIndex: "chnTradeStatus",
        key: "chnTradeStatus",
        title: t('student-bop-manage.openDialog.chnTradeStatus'),
        cellRender: (record, data) => {
          if (dictLists.data[dictEnum.CHANNEL_STATUS]) {
            const item = dictLists.data[dictEnum.CHANNEL_STATUS].find(v => v.value == data)
            return item ? item.label : ''
          }
        }
      },
    ]
    modalConfig.projectColumns = [{
        dataIndex: "schName",
        key: "schName",
        title: t('student-bop-manage.openDialog.schName')
      },
      {
        dataIndex: "code",
        key: "code",
        title: "项目编码"
      },
      {
        dataIndex: "projectName",
        key: "projectName",
        title: t('student-bop-manage.openDialog.schName')
      },
    ]
    modalConfig.courseColumns = [{
        dataIndex: "courseCode",
        key: "courseCode",
        title: t('student-bop-manage.openDialog.courseCode')
      },
      {
        dataIndex: "courseName",
        key: "courseName",
        title: t('student-bop-manage.openDialog.courseName')
      },
      {
        dataIndex: "projectName",
        key: "projectName",
        title: t('student-bop-manage.openDialog.projectName')
      },
      {
        dataIndex: "semester",
        key: "semester",
        title: t('student-bop-manage.openDialog.semester')
      },
      {
        dataIndex: "credit",
        key: "credit",
        title: t('student-bop-manage.openDialog.credit')
      },
    ]
  })

  const resetForm = () => {
    formRef.value.resetFields()
  }

  const onSubmit = () => {
    let result = JSON.parse(JSON.stringify(formState.state));
    result.transcriptAdd = result.tranType == 1
                          ? result.paperAdd : result.tranType == 2
                          ? result.emailAdd : []
    formRef.value.validate().then(() => {
      delete result.paperAdd
      delete result.emailAdd
      if (route.query.id) {
        updateItem(result)
      } else {
        saveItem(result)
      }
    })
  };

  const saveItem = (data) => {
    save(data).then(res => {
      console.log(res)
      if (res.code === 200) {
        message.success("保存成功")
        returnRoute()
      }
      if (res.code === 500) return message.error(res.msg || '新增失败，服务器错误')
      isLoading = false
    }).catch(() => isLoading = false)
  }

  const updateItem = (data) => {
    update(data).then(res => {
      console.log(res)
      if (res.code === 200) {
        message.success("保存成功")
        returnRoute()
      }
      if (res.code === 500) return message.error(res.msg || '编辑失败，服务器错误')
      isLoading = false
    }).catch(() => isLoading = false)
  }
  const openDialog = (type, index) => {
    if (type) {
      modalConfig.index = index
      modalConfig.currentType = type
      modalConfig.show = true
      if (type === 'chnSource') {
        modalConfig.commonColumns = modalConfig.chnSourceColumns
        modalConfig.api = chnSourcePage
        modalConfig.title = t('student-bop-manage.openDialog.selectchannels')
        modalConfig.searchForm = modalConfig.chnSourceSearchForm
      } else if (type === 'saleHead' || type === 'asdHead' || type === 'actHead') {
        modalConfig.commonColumns = modalConfig.responsibleColumns
        modalConfig.api = userPage
        modalConfig.searchForm = modalConfig.saleHeadSearchForm
        if (type === 'saleHead') {
          modalConfig.title = t('student-bop-manage.openDialog.selectsaleHead')
        }
        if (type === 'asdHead') {
          modalConfig.title = t('student-bop-manage.openDialog.selectasdHead')
        }
        if (type === 'actHead') {
          modalConfig.title = t('student-bop-manage.openDialog.selectactHead')
        }
      } else if (type === 'universityVisible') {
        modalConfig.commonColumns = modalConfig.universityColumns
        modalConfig.api = schoolPage
        modalConfig.title = t('student-bop-manage.openDialog.selectschool')
        modalConfig.searchForm = modalConfig.schoolSearchForm
      } else if (type === 'project') {
        modalConfig.commonColumns = modalConfig.projectColumns
        modalConfig.api = projectPage
        modalConfig.title = t('student-bop-manage.openDialog.selectproject')
        modalConfig.searchForm = modalConfig.projectSearchForm
      } else if (type === 'course') {
        modalConfig.commonColumns = modalConfig.courseColumns
        modalConfig.api = coursePage
        modalConfig.title = t('student-bop-manage.openDialog.selectcourse')
        modalConfig.searchForm = modalConfig.courseSearchForm
      }
    }
  }
  const closeDialog = () => {
    modalConfig.show = false
  }
  const selectItem = (value, type, index) => {
    console.log(value)
    if (index == undefined) {
      if (type === 'chnSource') {
        formState.state.chnName = value.chnName;
        formState.state.chnSource = value.id;
      } else if (type === 'saleHead') {
        formState.state.saleHead = value.nickname;
        formState.state.saleHeadCode = value.id;
      } else if (type === 'asdHead') {
        formState.state.asdHead = value.nickname;
        formState.state.asdHeadCode = value.id;
      } else if (type === 'actHead') {
        formState.state.actHead = value.nickname;
        formState.state.actHeadCode = value.id;
      } else if (type === 'universityVisible') {
        formState.state.colName = value.schoolEnName;
        formState.state.colCty = value.schCountry;
        formState.state.colAdd = value.schCity;
      }
    } else {
      if (type === 'universityVisible') {
        formState.state.purpose[index].school = value.schoolEnName;
      } else if (type === 'project') {
        formState.state.purpose[index].project = value.projectName;
      } else if (type === 'course') {
        formState.state.purpose[index].course = value.courseName;
      }
    }
  }
  //上传文件
  const handleUpload = data => {
    const formData = new FormData()
    formData.append('file', data.file)
    upload(formData).then(res => {
      if (res.code === 500) {
        message.error({
          content: '上传附件失败'
        })
        data.onError()
      } else {
        data.onSuccess(res.data)
        formState.state.purpose[dictLists.fileuploadindex].authUrl = res.data.path;
      }
    })
  }
  const state = reactive({
    uploadImgLoading: false
  })
  const screenshotUpload=file=>{
    if (!state.uploadImgLoading) {
      const Files = new FormData()
      Files.append('file', file)
      state.uploadImgLoading = true
      upload(Files).then(res => {
        if (res.code === 500) {
          message.error({
            content: res.msg || '上传图片失败'
          })
        } else {
          const {
            path: url,
            id: fileId,
            remark,
            name
          } = res.data
          formState.state.purpose[dictLists.fileuploadindex].authUrl = url;
        }
        state.uploadImgLoading = false
      }).catch(() => state.uploadImgLoading = false)
    }
    return false
  }
  const beforeUpload = file => {
    if (!state.uploadImgLoading) {
      const Files = new FormData()
      Files.append('file', file)
      state.uploadImgLoading = true
      upload(Files).then(res => {
        if (res.code === 500) {
          message.error({
            content: res.msg || '上传图片失败'
          })
        } else {
          const {
            path: url,
            id: fileId,
            remark,
            name
          } = res.data
          formState.state.headUrl = url
        }
        state.uploadImgLoading = false
      }).catch(() => state.uploadImgLoading = false)
    }
    return false
  };
  emailPattern;
  const inputChange = (e, type, value, index) => {
    let result = null
    switch (type) {
      case 'email': {
        const result = formState.state.paperAdd[index].email
        if (result && !emailPattern.test(result)) {
          state.emailError = '请输入正确的邮箱地址'
          state.emailStatus = 'error'
        } else {
          state.emailError = ''
          state.emailStatus = 'success'
        }
      }
      break;
      case 'backEmail': {
        const result = formState.state.emailAdd[index].backEmail
        if (result && !emailPattern.test(result)) {
          state.backEmailError = '请输入正确的邮箱地址'
          state.backEmailStatus = 'error'
        } else {
          state.backEmailError = ''
          state.backEmailStatus = 'success'
        }
      }
      break;
      case 'postCode': {
        const result = value
        if (result && !postCodePattern.test(result)) {
          state['postCodeError' + index] = '请输入正确的邮编'
          state['postCodeStatus' + index] = 'error'
        } else {
          state['postCodeError' + index] = ''
          state['postCodeStatus' + index] = 'success'
        }
      }
      break;
      case 'phone': {
        const result = value
        if (result && !phoneCardPattern.test(result)) {
          state['phoneError' + index] = '请输入正确的电话号码'
          state['phoneStatus' + index] = 'error'
        } else {
          state['phoneError' + index] = ''
          state['phoneStatus' + index] = 'success'
        }
      }
      break;
    }
  }

</script>
<style scoped>
  .pre-title {
    padding: 10px 25px;
    background-color: #f5f5f5;
    color: #555;
  }
</style>
